<template>
  <div class="factory-calculate" :style="siteContentViewHeight">
    <div class="navbar-wrap">
      <div
        class="nav-btn nav-btn__1"
        :class="{ 'is-active': groupName === 'calculate' }"
        @click="groupName = 'calculate'"
      >
        <span>我的标签</span>
      </div>
      <div class="nav-btn nav-btn__2" :class="{ 'is-active': groupName === 'all' }" @click="groupName = 'all'">
        <span>共享标签</span>
      </div>
      <!-- <div class="nav-btn nav-btn__3" :class="{ 'is-active': groupName === 'human' }">
        相似人群拓展
      </div> -->
    </div>
    <calculate-group v-if="groupName === 'calculate'"></calculate-group>
    <calculate-all v-else-if="groupName === 'all'"></calculate-all>
  </div>
</template>

<script>
import calculateGroup from './calculate-group'
import calculateAll from './calculate-all'
export default {
  components: {
    calculateGroup,
    calculateAll
  },
  data() {
    return {
      groupName: 'calculate',
      loading: false
    }
  },
  computed: {
    siteContentViewHeight() {
      return { height: this.$store.getters['common/siteContentViewHeight'] + 'px' }
    }
  },
  methods: {}
}
</script>

<style lang="scss">
@import './calculate.scss';
.factory-calculate {
  padding: 0 10px;
  position: relative;
  .navbar-wrap {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 36px;
    border-right: 1px solid #dedede;
    z-index: 100;
    .nav-btn {
      font-size: 16px;
      position: absolute;
      padding: 18px 8px;
      background-color: #e8f0ff;
      text-align: center;
      border-right: 1px solid #dedede;
      border-bottom: 1px solid #dedede;
      line-height: 28px;
      margin-top: -2px;
      border-radius: 8px;
      box-shadow: #d0cccc 0 2px 2px;
      cursor: pointer;
      &.nav-btn__1 {
        border-top-left-radius: unset;
        z-index: 4;
      }
      &.nav-btn__2 {
        top: 140px;
        z-index: 3;
      }
      &.nav-btn__3 {
        top: 275px;
        z-index: 2;
        border-bottom-left-radius: unset;
      }
      &.is-active {
        background-color: #4d82e9;
        color: #fff;
        font-weight: bold;
        z-index: 100;
      }
    }
  }
}
</style>
